<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星辰 SQL 改造工具</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h2>🌟 星辰 SQL 改造工具</h2>

<nav>
  <button id="mode1" class="active">功能 1：建表/索引 改造</button>
  <button id="mode2">功能 2：新增字段 ALTER SQL</button>
</nav>

<!-- 功能 1 -->
<section id="section1" class="active">
  <textarea id="input1" placeholder="粘贴原始 SQL..."></textarea>
  <div class="button-group">
    <button id="transformSQL">🚀 改造 SQL</button>
    <button id="copyOutput1">📄 复制结果</button>
<!--    <button onclick="transformSQL()">🚀 改造 SQL</button>-->
<!--    <button onclick="copyOutput('output1')">📄 复制结果</button>-->
  </div>
  <div style="display: flex; justify-content: space-between; align-items: center;">
<!--    <h3 style="margin: 0;">📋 改造结果</h3>-->
<!--    <button id="copyBtn" onclick="copyOutput('output1')">📄 复制到剪贴板</button>-->
  </div>
  <textarea id="output1" placeholder="改造后的 SQL..." readonly></textarea>
</section>

<!-- 功能 2 -->
<section id="section2">
  <input type="text" id="tableName" placeholder=" 请输入表名..." style="width: 100%; padding: 10px; font-size: 15px; border: 2px solid #ddd; border-radius: 5px;">
  <textarea id="fieldInput" placeholder="多个字段用英文逗号 , 分隔（例：fk_id int8 NULL, fk_name citext NOT NULL DEFAULT 'xx'）"></textarea>

  <div class="button-group">
    <button id="generateAlterSQL">✨ 生成 ALTER SQL</button>
    <button id="copyOutput2">📄 复制结果</button>
<!--    <button onclick="generateAlterSQL()">✨ 生成 ALTER SQL</button>-->
<!--    <button onclick="copyOutput('alterOutput')">📄 复制结果</button>-->
  </div>
  <h3 style="margin: 0;">📋 改造结果</h3>
  <textarea id="alterOutput" placeholder="生成的 ALTER SQL..." readonly></textarea>
</section>

<script src="js/popup.js"></script>

</body>
</html>
